<template>
  <div class="step2-success-container">
    <a-icon
      class="icon"
      type="clock-circle"
    />
    <div class="text">
      we are connecting to your bank.  please wait a few minutes for the process to complete
    </div>
    <a-button
      class="button"
      type="primary"
      size="large"
    >
      {{ timer.minute | zeroFill }}:{{ timer.second | zeroFill }}
    </a-button>
  </div>
</template>

<script>

export default {

  filters: {
    zeroFill(value) {
      const v = Number(value);
      return v < 10 ? `0${v}` : v;
    }
  },
  data() {
    return {
      timer: {
        example: null,
        minute: 0,
        second: 0
      }
    };
  },

  mounted() {
    this.$nextTick(() => {
      this.startTimer();
    });
  },

  beforeDestroy() {
    this.resetTimer();
  },

  methods: {
    actionTimer() {
      console.log(32232);
      this.timer.second += 1;
      if (this.timer.second >= 60) {
          this.timer.second = 0;
          this.timer.minute += 1;
        }
    },

    startTimer() {
      this.timer.example = window.setInterval(this.actionTimer, 1000);
    },

    resetTimer() {
      window.clearInterval(this.timer.example);

      this.timer.minute = 0;
      this.timer.second = 0;
    }
  }
};
</script>

<style lang="scss" scoped>
.step2-success-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;

  .icon {
    font-size: 100px;
    color: $theme-color;
  }

  .text {
    font-size: $font-size-lg;
    font-weight: bold;
    margin-top: $margin-md;
    margin-bottom:  $margin-lg;
  }

  .button {
    width: 420px;
  }
}
</style>
